import { Module} from "../framework.js"
import * as SidebarEvent from "./sidebar-event.js"
import * as UI from "../ui.js"
import {Utils} from '../common.js'
import D from "../delegator.js"
import DataStorage from "../data-storage.js"
const OFFSET_PER_DEPTH = 1.5; // em
const ARROWSIZE = 1.2;// em 
const COLOR_PRE_DEPTH = 10;// 0~255; 
const GAP_SIZE = 0.5; // em

class ArticleListItem {
    constructor(pConfig) {
        Utils.DefineFixedProperty(this, 'SUID', pConfig.SUID);
        Utils.DefineFixedProperty(this, 'PID', pConfig.SUID);
        this._ui = UI.UIPageListItem();
        this.Update(pConfig);
    }
    Destruct() {
        this._ui.Release();
        this._ui = undefined;
    }

    get containerElem() {return this._ui.containerElement;}
    get layoutElem() {return this._ui.element;}
    get PSUID() {return this._PSUID;}

    Update(pConfig) {
        if (this.PID == pConfig.SUID) {
            this._name = pConfig.name;
            this._PSUID = pConfig.PSUID;
            this._ui.SetName(this._name);
            this._ui.SetPID(this.PID);
        }
        return this;
    }

    SetOffsetSize(value) {
        this._ui.SetOffsetSize(value);
    }

    SetCollapserButtonVisibility(value){
        value ? this._ui.ShowCollaperButton() : this._ui.HideCollaperButton();
    }

    SetActive(b) {
        b ? this._ui.Active() : this._ui.Deactive();
    }
}

class ArticleList extends Module {
    constructor(disp) {
        super(disp);
        this._ui = document.body.querySelector('#ID_sidebar_content_tree');
        this._lastActivedItem = undefined;
        this._mapItem = new Map();

        this._ui.addEventListener('click', e => {
            let _elem = e.target;
            while(_elem) {
                if(D(_elem).HasAttribute('item')) {
                    break;
                }
                _elem = _elem.parentElement;
            }
            if(_elem) {
                const _PID = _elem.id;
                this.Select(_PID);
                DataStorage.FetchPageContent(_PID);
            }
        });
    }

    CreateItem(pConfig) {
        const _item = new ArticleListItem(pConfig);
        this._mapItem.set(pConfig.SUID, _item);
        const _pItem = this._mapItem.get(pConfig.PSUID);
        if(_pItem) {
            //_pItem.Render();
            _pItem.containerElem.append(_item.layoutElem);
        } else {
            this._ui.append(_item.layoutElem);
        }
    }

    DeleteItem(PID) {
        const _item = this._mapItem.get(PID);
        const _parentItem = this._mapItem.get(_item.PSUID);
        if(_parentItem) {
            //_parentItem.Render();
        }
        this._mapItem.delete(PID);
        _item.Destruct();
    }

    ModifyItem(pConfig) {
        this._mapItem.get(pConfig.SUID).Update(pConfig);
        //this._tree.DebugPrint("modifyitem");
    }

    Select(PID) {
        const _item = this._mapItem.get(PID);
        if(_item == this._lastActivedItem) return;
        if(this._lastActivedItem) {
            this._lastActivedItem.SetActive(false);
            this._lastActivedItem = undefined;
        }
        if(_item) {
            _item.SetActive(true);
            this._lastActivedItem = _item;
        }
    }

    //instance of UniqueArray;
    Init(tree) {
        /// insert to DOM tree;
        this._ui.replaceChildren();
        let _pItem = undefined;

        let _node = tree.TraverseAll();
        while(_node) {
            const _pConfig = _node.data;
            const _item = new ArticleListItem(_pConfig);
            _item.SetOffsetSize(_node.depth - 1);
            _item.SetCollapserButtonVisibility(!!_node.firstChildNode);
            this._mapItem.set(_pConfig.SUID, _item);
            _pItem = this._mapItem.get(_pConfig.PSUID);
            if(_pItem) {
                _pItem.containerElem.append(_item.layoutElem);
            } else {
                this._ui.append(_item.layoutElem);
            }
            _node = tree.TraverseAll(_node);
        }
    }
}


export default class SidebarContent extends Module {
    constructor(disp) {
        super(disp);
        this._articleList = new ArticleList(this._dispatcher);

        const _rl = DataStorage.RegistListener;
        _rl(DataStorage.EVT_DATASTORAGE_METAS_FETCHED, event => {
            this._articleList.Init(event.pageTree);
        })
        _rl(DataStorage.EVT_DATASTORAGE_META_ADDED, event => {
            this._articleList.CreateItem(event.pageProperty);
            this._articleList.Select(event.pageProperty.SUID);
        })
        _rl(DataStorage.EVT_DATASTORAGE_META_MODIFIED, event => {
            const _metaData = event.pageProperty;
            this._articleList.ModifyItem(_metaData);
            this._articleList.Select(_metaData.SUID);
        })
        _rl(DataStorage.EVT_DATASTORAGE_META_DELETED, event => {
            this._articleList.Select();
            this._articleList.DeleteItem(event.PID);
        })
    }
}


